<!DOCTYPE html>
<html lang="en">

<head>
    <title>登录</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
</head>
<style>
     html{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
    background-repeat: no-repeat;
  }
    input {
        margin-top: 20px;
        border-radius: 3px;
        border: none;
    }
</style>

<body>
    <h1 style="text-align: center;">四川邮电职业技术学院。某某系统</h1>
    <form style="background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
        width: 300px;height: 200px; color: aliceblue; text-align: center; border-radius: 5px;
        margin: 0 auto; margin-top: 50px;
        ">
        <label for="sn">学号：</label>
        <input type="text" name="sn" id="sn">
        <br>
        <label for="pswd">密码：</label>
        <input type="password" name="pswd" id="pswd">
        <br>
        <input type="button" onclick="login()" value="提交">
        <input type="reset" value="重置">
        <br>
        <br>
        <label onclick="window.location.href='/register'">新用户注册</label>
        <label onclick="window.location.href='/forget'">忘记密码</label>
    </form>
</body>
<script>
    function login() {
        let sn = document.getElementById("sn").value;
        let pswd = document.getElementById("pswd").value;
        fetch("/yanzhengLogin?sn=" + sn + "&pswd=" + pswd)
            .then(resp => resp.json())//解析
            .then(data => { //后续业务处理
                // data 就是后端发回来的数据，
                if (data != null) {
                    alert("欢迎你:" + data.Name);
                    localStorage.setItem("userinfo", JSON.stringify(data));
                    window.location.href = "/";
                } else {
                    alert("登录失败")
                }
            })
    }
</script>

</html>